<template>
	<view class="qinzi-container">
		<view class="tab-view-container ">
			<tn-tabs :list="scrollList" :current="currentTab" :activeColor="'#79CF67'" :showBar="false" @change="tabChange"></tn-tabs>
			<view class="border-line-view"></view>
		</view>
		<view class="botton-content" v-if="dataList.length">
			<view class="content-item" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
				<view class="icon15__item--icon">
				  <image v-if="item.stateEnum == 0" class="task-icon" src="../../static/progress.png"></image>
				  <image v-if="item.stateEnum == 3" class="task-icon" src="../../static/completed.png"></image>
				  <image v-if="item.stateEnum == 2" class="task-icon" src="../../static/ended.png"></image>
				</view>
				<view class="view-left tn-flex-1"  @click="goDetail(item)">
					<view class="item-title">{{item.title}}</view>
					<view class="item-msg">
						<text class="littlcolor">{{item.startDate}}</text>
						<text class="tn-padding-left-sm littlcolor">{{item.className}}</text>
					</view>
					<view class="item-msg color-2">当日{{item.count}}人参与</view>
				</view>
				<view class="">
					
					<tn-tag v-if="item.stateEnum==0" width="100%" backgroundColor="#24f083" fontColor="#ffffff" shape="radius">{{item.stateStr}}</tn-tag>
					<tn-tag v-else-if="item.stateEnum==1" width="100%" backgroundColor="#01BEFF" fontColor="#ffffff" shape="radius">{{item.stateStr}}</tn-tag>
					<tn-tag v-else backgroundColor="#F39C97" width="100%" fontColor="#ffffff" shape="radius">{{item.stateStr}}</tn-tag>
				</view>
			</view>
		</view>
		
		<view class="tn-margin-top-xl tn-padding-top tn-flex tn-flex-row-center" v-else>
			<tn-empty mode="data"></tn-empty>
		</view>
		<view class="tn-padding-sm bottom-view">
				<tn-button width="100%" backgroundColor="#79CF67" fontColor="#fff" @click="gofabupage">发布任务</tn-button>
		</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	
	export default {
		name: 'youerruyuan',
		data(){
			return {
				activeName: 1,
				classId: '',
				dataList: [1,2,3,4,5,6,7,8],
				
				scrollList: [
					
				],
				currentTab: 0,
				pageIndex: 1,
				totalPage:1,
				imageTitle: ''
			}
		},
		onPullDownRefresh() {
			this.pageIndex = 1
			this.getrenwulist();
			console.log('下拉刷新------')
		},
		onReachBottom() {
			this.pageIndex++;
			this.getrenwulist();
			console.log('上啦更多-------')
		},
		onShow(){
			
			this.pageIndex = 1
			this.getrenwulist();
		},
		mounted() {
			
				this.pageIndex = 1
				this.getbanjiFenlei();
				this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
				this.getrenwulist();
		},
		methods: {
			tabChange(tab){
				this.currentTab = tab;
				this.pageIndex = 1
				this.classId = this.scrollList[this.currentTab].id;
				// this.getbanjiFenlei();
				this.getrenwulist();
			},
			goDetail(item){
				uni.navigateTo({
					url: '/pagesA/yuanwuduan/renwuDetail?id='+item.id
				})
			},
			gowancheng(item){
				console.log(item)
				uni.navigateTo({
					url: '/pagesA/qinziyouer/wancheng'
				})	
			},
			gofabupage(){
				uni.navigateTo({
					url: '/pagesA/yuanwuduan/faburenwu'
				})	
			},
			
			getbanjiFenlei(){
				this.request({
					url: '/SysClasses/List',
					method: 'get',
					params: {
						isArchived: false
					},
				}).then(res => {
					if(res.code == 200){
						res.data.unshift({
							name: '全部',
							id: ''
						})
						this.scrollList = res.data;
						if(this.scrollList.length){
							this.classId = this.scrollList[0].id;
							// this.getweiqiandao();
						}
					}
				})
				
				// this.request({
				// 	url: '/SysClasses/ListByTeacher',
				// 	method: 'get',
				// }).then(res => {
				// 	if(res.code == 200){
				// 				res.data.unshift({
				// 					name: '全部',
				// 					id: ''
				// 				})
				// 		this.scrollList = res.data;
				// 		if(this.scrollList.length){
				// 			this.classId = this.scrollList[0].id;
				// 			// this.getweiqiandao();
				// 		}
				// 	}
					
				// })
			},
			getrenwulist(){
				if(this.totalPage > 0 && this.pageIndex > this.totalPage){
					this.$refs.toast.show({
					  title: '',
					  content: '没有更多了',
					  icon: '',
					  image: '',
					  duration: 1000
					})
					return;
				}
				let params = {
					PageNo: this.pageIndex,
					PageSize: 10
				}
				if(this.classId){
					params = {
						ClassId: this.classId,
						PageNo: this.pageIndex,
						PageSize: 10
					}
				}else{
					params = {
						PageNo: this.pageIndex,
						PageSize: 10
					}
				}
				this.request({
					url: '/ParentChildTasks/Page',
					method: 'get',
					params: params,
				}).then(res => {
					
						if(res.code == 200){
							if(this.pageIndex == 1){
								this.dataList = [];
							}
							let rows = res.data.rows;
							this.totalPage = res.data.totalPage;
							rows.forEach(item => {
								// if(item.images && item.images.length){
								// 	item.images.forEach(_img => {
								// 		_img['src'] = this.imageTitle + _img.filedId;
								// 	})
								// }
								this.dataList.push(item);
							})
							uni.stopPullDownRefresh()
						}
				})
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	.qinzi-container{
		padding-bottom: 60px;
	}
	.tab-view-container{
		margin-left: 10px;
		overflow: hidden;
		margin-bottom: 10px;
	}
	.qiandao-view{
		margin-right: 20px;
		line-height: 36rpx;
	}
	.activeTab{
		color: #000000;
		font-size: 36rpx;
	}
	.botton-content{
		padding: 26rpx;
	}
	.content-item{
		padding: 20rpx;
		position: relative;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 26rpx;
		display: flex;
		align-items: center;
			
		.task-icon{
			width:100%;
			height:100%;
		}
	}
	.icon15__item--icon{
		width: 120rpx;
		text-align: center;
		height: 120rpx;
	}
	.view-left{
		margin-left: 16rpx;
		.item-title{
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
			height: 40rpx;
			overflow: hidden;
		}
		.item-msg{
			font-size: 26rpx;
			overflow: hidden;
			color: rgba(0,0,0,0.60);
		}
	}
		.view-btn{
			position: absolute;
			right: 20rpx;
			top: 50%;
			margin-top: -30rpx;
		}
	.view-wancheng{
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		right: 30rpx;
		top: 10rpx;
		text-align: center;
		.text-btom{
			position: absolute;
			bottom: 15rpx;
			color: #2de8bd;
		}
		.view-txt{
			color: #F39C97;
		}
	}
	.bottom-view{
		position: fixed;
		height: 60px;
		background-color: #fff;
		bottom: 0rpx;
		left: 10rpx;
		right: 10rpx;
	}
	.littlcolor{
		color: #888888;
	}
	.color-2{
		color: #555555;
	}
</style>